<template>
  <div class="examination" v-loading="loading">
    <div style="margin-top: 35px" v-for="(topic, index) in topics" :key="index">
      <div>✏️ 第 {{ index + 1 }} 题：{{ topic.text }}</div>
      <el-slider v-model="topic.result" :marks="topic.mark" :max="10"/>
      <el-divider>
        <el-icon>
          <star-filled/>
        </el-icon>
      </el-divider>
    </div>
    <div style="width: 100%;text-align: center">
      <el-button @click="toResult" type="success">获取结果</el-button>
    </div>
  </div>
</template>

<script setup>
import {StarFilled} from '@element-plus/icons-vue'
import {computed, ref} from 'vue'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const loading = ref(false)

const topics = ref([
  {
    text: '最近一个月，我能平和地处理情绪起伏，即使遇到不开心的事情，也能较快恢复平静。',
    mark: {
      0: '常常感到难以应对',
      10: '大多数时候内心平稳'
    },
    result: ''
  },
  {
    text: '当我面对学习或生活中的困难时，我会尝试寻找解决办法，而不是被压力压倒。',
    mark: {
      0: '完全不知所措',
      10: '能从容应对并调整状态'
    },
    result: ''
  },
  {
    text: '我和家人、朋友之间的沟通让我感到被倾听，他们的陪伴让我觉得温暖和安全。',
    mark: {
      0: '感到孤立无援',
      10: '充分感受到理解与支持'
    },
    result: ''
  },
  {
    text: '我认可自己的独特之处，即使有不完美的地方，我也愿意给自己时间和空间去成长。',
    mark: {
      0: '强烈否定自我价值',
      10: '接纳自我并充满信心'
    },
    result: ''
  },
  {
    text: '我的睡眠和休息时间比较充足，醒来后能感到精力有所恢复，很少因为疲惫影响日常生活。',
    mark: {
      0: '长期失眠/疲惫',
      10: '休息质量良好且规律'
    },
    result: ''
  },
  {
    text: '我对某些学习内容或课外活动保有好奇心，愿意主动尝试并从中获得成就感。',
    mark: {
      0: '完全缺乏兴趣',
      10: '充满热情与探索欲'
    },
    result: ''
  },
  {
    text: '我的身体状态比较稳定，很少因为情绪波动出现明显的头疼、胃痛或胸闷等不适。',
    mark: {
      0: '频繁出现不适',
      10: '几乎无相关症状'
    },
    result: ''
  },
  {
    text: '在集体活动中，我能自然地表达自己的想法，不会因为担心被评价而过度紧张或回避他人。',
    mark: {
      0: '强烈回避社交',
      10: '感到轻松自在'
    },
    result: ''
  },
  {
    text: '我对未来抱有希望，即使暂时遇到挫折，也相信自己有能力跨越困难。',
    mark: {
      0: '感到无望迷茫',
      10: '积极规划并保持期待'
    },
    result: ''
  },
  {
    text: '当我感到难过或焦虑时，我会通过运动、倾诉、写日记等健康方式缓解情绪，不会伤害自己或他人。',
    mark: {
      0: '常采用有害方式',
      10: '总能妥善处理'
    },
    result: ''
  }
])

let totalResult = computed(() => {
  let result = 0
  topics.value.forEach(topic => {
    result += topic.result || 0
  })
  return result
})

function toResult() {
  let isError = false
  topics.value.forEach(topic => {
    if (topic.result === '') {
      isError = true
    }
  })
  if (isError) {
    ElMessage.error('请完成全部的测试')
    return
  }
  loading.value = true
  setTimeout(() => {
    loading.value = false
    router.push({path: '/results', query: {result: totalResult.value}})
  }, 3000)
}
</script>

<style scoped>
.examination {
  padding: 0 100px;
  padding-bottom: 20px;
  user-select: none;
}
</style>